<template>
  <div :style="'width:' + width">
    <div class="form-item-label-top">
      <span style="color: red; margin-right: 5px" v-if="required">*</span>
      <div>{{ name }}</div>
      {{ data.displayName }}
    </div>
    <el-table :data="data.invoices" stripe border highlight-current-row>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="invoice-table-expand">
            <el-form-item label="编号" v-if="scope.row.IN_No">
              <span>{{ scope.row.IN_No }}</span>
            </el-form-item>
            <el-form-item label="报销性质" v-if="scope.row.INTY_EnumTxt">
              <span>{{ scope.row.INTY_EnumTxt }}</span>
            </el-form-item>
            <el-form-item label="地址" v-if="scope.row.IN_AreaDesc">
              <span>{{ scope.row.IN_AreaDesc }}</span>
            </el-form-item>
            <el-form-item label="开票日期" v-if="scope.row.IN_DealDate">
              <span>{{ scope.row.IN_DealDate | formatDate }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="票据">
        <template slot-scope="scope">
          <!-- {{ scope.row.IN_AreaDesc ? `[${scope.row.IN_AreaDesc}]` : '' }} -->
          <a
            @click="
              imageSrc = fileURL + scope.row.FL_SrcPath
              imageVis = true
            "
          >
            {{ scope.row.INTY_EnumTxt ? `[${scope.row.INTY_EnumTxt}]` : '' }}
            {{ scope.row.FL_Name }}
          </a>
        </template>
      </el-table-column>
      <el-table-column label="发票金额" width="90px">
        <template slot-scope="scope">{{ scope.row.IN_Fee }}元</template>
      </el-table-column>
      <el-table-column label="报销金额" width="120px">
        <template slot-scope="scope">
          <el-input
            style="background: red"
            v-model="scope.row.ExpenseFee"
            placeholder="请输入报销金额"
            @input="input"
            :disabled="disabled"
            :suffix-icon="
              scope.row.ExpenseFee == scope.row.IN_Fee
                ? ''
                : 'el-icon-warning-outline'
            "
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="150px">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.ExpenseRemark"
            placeholder="请输入备注"
            @input="input"
            :disabled="disabled"
          ></el-input>
        </template>
      </el-table-column>
      <!-- <el-table-column label="开票日期" width="110px">
              <template slot-scope="scope">
                {{ scope.row.IN_DealDate | formatDate }}
              </template>
            </el-table-column> -->
      <el-table-column width="50px">
        <template slot="header">
          <el-button
            size="medium"
            type="text"
            slot="reference"
            icon="el-icon-plus"
            v-if="addEnable"
            :disabled="disabled"
            @click="
              getInvoices()
              chooseInvoiceVis = true
            "
          ></el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-delete"
            :disabled="disabled"
            @click="removeInvoice(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="chooseInvoiceVis"
      width="80%"
      :title="'选择' + name"
      :modal-append-to-body="false"
    >
      <div class="header">
        <span style="margin-left: 20px">关键字</span>
        <el-input
          placeholder="请输入关键字"
          v-model="req.keyword"
          style="width: 200px; margin-left: 10px"
          clearable
        ></el-input>
        <el-button
          type="primary"
          style="margin-left: 20px"
          size="small"
          @click="
            req.pageIndex = 1
            getInvoices()
          "
        >
          搜索
        </el-button>
      </div>
      <div style="height: 460px">
        <el-table
          style="overflow: auto"
          height="400px"
          :data="res.Items"
          stripe
          border
          highlight-current-row
        >
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column width="60" label="勾选">
            <template slot-scope="scope">
              <el-checkbox
                :value="
                  data.invoices.findIndex((x) => x.IN_ID == scope.row.IN_ID) !=
                  -1
                "
                @change="invoiceCheckChange(scope.row)"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="发票号码" width="120">
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                trigger="hover"
                v-if="scope.row.IN_No"
              >
                <div>[{{ scope.row.IN_ID }}]{{ scope.row.IN_No }}</div>
                <div slot="reference">
                  {{
                    scope.row.IN_No.length > 10
                      ? scope.row.IN_No.substring(0, 10) + '...'
                      : scope.row.IN_No
                  }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="发票金额" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                icon="el-icon-picture"
                @click="
                  imageSrc = fileURL + scope.row.FL_SrcPath
                  imageVis = true
                "
              ></el-button>
              {{ scope.row.IN_Fee }}元
            </template>
          </el-table-column>
          <el-table-column label="开票日期" width="100">
            <template slot-scope="scope">
              {{ scope.row.IN_DealDate | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="报销性质" width="80">
            <template slot-scope="scope">
              {{ scope.row.INTY_EnumTxt }}
            </template>
          </el-table-column>
          <el-table-column label="报销地址">
            <template slot-scope="scope">
              {{ scope.row.IN_AreaDesc }}
            </template>
          </el-table-column>
          <el-table-column label="抬头" width="260">
            <template slot-scope="scope">
              {{ scope.row.IN_Title }}
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              {{ scope.row.IN_Remark }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="total,prev,pager,next,sizes"
          style="float: right"
          background
          :current-page.sync="req.pageIndex"
          :page-size="req.pageSize"
          :total="res.Total"
          :page-sizes="[12, 18]"
          @size-change="
            (val) => {
              req.pageSize = val
              getInvoices()
            }
          "
          @current-change="getInvoices()"
        ></el-pagination>
      </div>
      <!-- <el-row :gutter="10">
        <el-col :span="4" v-for="(item, index) in res.Items" :key="index">
          <el-card style="position: relative">
            <el-image
              style="height: 150px; width: 100%"
              fit="fill"
              v-if="item.FL_SrcPath"
              :src="fileURL + item.FL_SrcPath"
              :preview-src-list="[fileURL + item.FL_SrcPath]"
            ></el-image>
            <div>
              <el-popover placement="top-start" width="300" trigger="hover">
                <p>{{ item.FL_Name }}</p>
                <p>编号:{{ item.IN_No }}【{{ item.IN_ID }}】</p>
                <p>发票金额：{{ item.IN_Fee }}</p>
                <p>开票日期：{{ item.IN_DealDate | formatDate }}</p>
                <p>录入日期：{{ item.IN_CreateTime | formatDate }}</p>
                <p>地址：{{ item.IN_AreaDesc }}</p>
                <p slot="reference" style="color: blue">
                  {{ item.FL_Name.substring(0, 12) }}
                </p>
              </el-popover>
              <div style="display: flex" @click="invoiceCheckChange(item)">
                <span>
                  {{ item.INTY_EnumTxt ? `【${item.INTY_EnumTxt}】` : '' }}
                </span>
                <span style="margin-right: 10px">
                  {{ item.USR_Name }}
                </span>
                <span style="flex: 1">{{ item.IN_Fee }}元</span>

                <el-checkbox
                  :value="
                    data.invoices.findIndex((x) => x.IN_ID == item.IN_ID) != -1
                  "
                  @change="invoiceCheckChange(item)"
                ></el-checkbox>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-pagination
          layout="total,prev,pager,next,sizes"
          style="float: right"
          background
          :current-page.sync="req.pageIndex"
          :page-size="req.pageSize"
          :total="res.Total"
          :page-sizes="[12, 18]"
          @size-change="
            (val) => {
              req.pageSize = val
              getInvoices()
            }
          "
          @current-change="getInvoices()"
        ></el-pagination>
      </el-row> -->
    </el-dialog>

    <el-image-viewer
      style="z-index: 9999"
      v-if="imageVis"
      :url-list="[imageSrc]"
      :on-close="closeImage"
    ></el-image-viewer>
    <!-- <el-dialog
      :visible.sync="imageVis"
      width="860px"
      :modal-append-to-body="false"
      center
    >
      <el-image
        fit="fill"
        :src="imageSrc"
        style="height: 600px; width: 800px"
      ></el-image>
    </el-dialog> -->
  </div>
</template>
<script>
import elImageViewer from 'element-ui/packages/image/src/image-viewer'
import { getInvoices } from '@/api/flowCenter/field/personalInvoiceSelection'
import { baseURL, fileRoot } from '@/config'
export default {
  components: { elImageViewer },
  props: ['value', 'disabled', 'props', 'required', 'isBusiness', 'creatorId'],
  data: function () {
    return {
      imageSrc: '',
      req: {
        keyword: '',
        dealDates: [],
        createDates: [],
        pageIndex: 1,
        pageSize: 12,
      },
      res: {
        Items: [],
        Total: 0,
      },
      data: {
        invoices: [],
        displayName: '',
      },
      loading: false,
      chooseInvoiceVis: false,
      imageVis: false,
      fileURL: baseURL + fileRoot,
      addEnable: false,
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '个人票据'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '个人票据'
        }
      }
      return '个人票据'
    },
  },
  methods: {
    closeImage() {
      this.imageVis = false
      return true
    },
    getInvoices() {
      this.loading = true
      getInvoices(this.req).then(({ data }) => {
        this.res = data
        this.loading = false
      })
    },
    removeInvoice(invoice) {
      this.data.invoices.splice(
        this.data.invoices.findIndex((x) => x.IN_ID == invoice.IN_ID),
        1
      )
      this.input()
    },
    invoiceCheckChange(invoice) {
      let index = this.data.invoices.findIndex((x) => x.IN_ID == invoice.IN_ID)
      if (index == -1) {
        this.data.invoices.push({
          ...invoice,
          ExpenseFee: invoice.IN_Fee,
          ExpenseRemark: '',
        })
      } else {
        this.data.invoices.splice(index, 1)
      }
      this.input()
    },
    input() {
      let invoiceSum = 0
      let expenseSum = 0
      this.data.invoices.forEach((x) => {
        invoiceSum += Number(x.IN_Fee)
        expenseSum += Number(x.ExpenseFee)
      })
      this.data.displayName = `票据${
        this.data.invoices.length
      }张，发票金额共${invoiceSum.toFixed(2)}元，报销金额共${expenseSum.toFixed(
        2
      )}元`
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  mounted: function () {
    let empId = this.$store.getters['user/curEmp'].EMP_ID
    //只有表单发起人才允许添加票据
    this.addEnable = empId == this.creatorId || !this.creatorId
    if (this.value && Object.keys(this.value).length) {
      this.data = JSON.parse(this.value)
    }
  },
}
</script>

<style>
.el-input__suffix {
  color: red;
  font-size: 14px;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.el-form-item {
  margin: 10px !important;
}
</style>
<style>
.invoice-table-expand {
  font-size: 0;
}
.invoice-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.invoice-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>